<template>
  <van-notice-bar left-icon="volume-o" :text="notice" />
  <van-swipe :autoplay="3000">
    <van-swipe-item v-for="(item, i) in bannerImg" :key="i">
      <van-image :src="item" height='20rem' width='100%' />
    </van-swipe-item>
  </van-swipe>
  <van-grid>
    <van-grid-item icon="link-o" text="新开店铺" />
    <van-grid-item icon="guide-o" text="附近店铺" />
    <van-grid-item icon="good-job-o" text="精选好店" />
    <van-grid-item icon="smile-o" text="早餐店铺" />
  </van-grid>
  <van-grid>
    <van-grid-item icon="shopping-cart-o" text="中餐店铺" />
    <van-grid-item icon="gift-o" text="西餐店铺" />
    <van-grid-item icon="hot-o" text="限时优惠" />
    <van-grid-item icon="eye-o" text="更多" />
  </van-grid>

  <van-grid :border="false" :column-num="2">
    <van-grid-item v-for="(item, i) in images" :key="i">
      <router-link to='/ShopDetail/1'>
        <van-image :src="item" />
      </router-link>
    </van-grid-item>
  </van-grid>
</template>

<script setup>

let notice = '欢迎来到:点餐预约系统'

let images = [
  'http://47.98.184.192:8085/LightPicture/2023/05/49d3c460a9557e5a.jpeg',
  'http://47.98.184.192:8085/LightPicture/2023/05/bd78c11ccacd3715.jpeg',
  'http://47.98.184.192:8085/LightPicture/2023/05/0307e0f67667d886.jpeg',
  'http://47.98.184.192:8085/LightPicture/2023/05/71cb3d5a538210b0.jpeg',
  'http://47.98.184.192:8085/LightPicture/2023/05/7be86a2280b9ff82.jpeg',
  'http://47.98.184.192:8085/LightPicture/2023/05/877f3c9157eb55e4.jpeg',
  'http://47.98.184.192:8085/LightPicture/2023/05/03c1046bc485a01d.jpeg',
  'http://47.98.184.192:8085/LightPicture/2023/05/1625d071f128097f.jpeg'
]

let bannerImg=[
  'http://47.98.184.192:8085/LightPicture/2023/05/8b795ac13f19f32e.png',
  'http://47.98.184.192:8085/LightPicture/2023/05/652f8d0ea3dbb483.png'
]
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
